<template>
  <div class="New_build">
    <!-- 这个只是充当遮罩层 -->
    <div class="mask"></div>
    <!-- 下面才是在对话框中，真正显示的内容 -->
    <div class="new_build">
      <div class="build-top">
        <p>新建资料（仓库盘差）</p>
        <i class="el-icon-close" @click="handleCloseBtnClick"></i>
      </div>

      <div class="build-info">
        <div class="build-info-1">
          <p>盘差日期</p>
          <el-date-picker
            v-model="differTime"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="date"
          >
          </el-date-picker>
          <p>单号</p>
          <el-input
            :disabled="Dis"
            v-model="receiptsNumber"
            class="build-inp"
          ></el-input>
          <p>仓库编号</p>
          <!-- <el-input :disabled="Dis" v-model="warehouseNo" class="build-inp"></el-input> -->
          <el-select :disabled="Dis" v-model="warehouseNo" class="build-inp">
            <el-option
              v-for="item in warehouseList"
              :key="item.value"
              :label="item.value"
              :value="item.value"
            >
              <span style="float: left">{{ item.value }}</span>
              <span style="float: right">{{ item.label }}</span>
            </el-option>
          </el-select>

          <p>盘差序号</p>
          <el-input v-model="sequence" disabled></el-input>
        </div>
        <div style="display: flex; margin: 10px 0"></div>
        <!-- 下面是表格区域 -->
        <div class="build-info-4">
          <el-table
            border
            :data="codeData"
            id="codeTable"
            class="tb-edit"
            style="width: 100%; margin-bottom: 20px"
            max-height="148px"
            :header-cell-style="{
              background: '#f4f4f4',
              padding: 0,
              height: '40px'
            }"
            :cell-style="{ padding: 0, height: '36px' }"
          >
            <!-- 这一列的header表示款号 -->
            <el-table-column :label="header"> </el-table-column>
            <el-table-column prop="colorName" label="颜色"> </el-table-column>
            <!-- 如果你想让每一个表格都是可以输入的，那么就拿剩下的表格来进行遍历 -->
            <!--  ['5', 'E', 'B', '1', 'D', '3', 'C', '9', __ob__: Observer]0: "5"1: "E"2: "B"3: "1"4: "D"5: "3"6: "C"7: "9"] -->
            <!-- label是看到的列名字，prop显示要渲染到这个列上面的数据,列动态的遍历生成就行 -->
            <template v-for="col in sizeList">
              <el-table-column
                :key="col + Math.random()"
                :prop="col"
                :label="col"
              >
                <template slot-scope="scope">
                  <el-input
                    size="small"
                    class="innerInp"
                    v-model="scope.row[col]"
                    @blur="
                      tableInputHandleClick($event, {
                        index: scope.$index,
                        key: col,
                        result: scope.row[col]
                      })
                    "
                    @keyup.enter.native="inpEnter"
                  >
                  </el-input>
                </template>
              </el-table-column>
            </template>
          </el-table>
        </div>

        <!-- 扫描/输入条码,按回车键的区域 -->
        <div class="enterBarcode">
          <el-input
            @keyup.enter.native="scanning($event)"
            v-model="searchValue"
            placeholder="扫描/输入条码,按回车键"
            id="input"
          ></el-input>
          <p style="margin: 15px 0 0 5px">合计：{{ howMany }}</p>
        </div>
        <!-- 下面是大表格的区域 -->
        <el-table
          height="440px"
          :data="barcodeData"
          style="width: 100%"
          :header-cell-style="{
            background: '#f4f4f4',
            padding: 0,
            height: '40px'
          }"
          :cell-style="{ padding: 0, height: '36px' }"
          highlight-current-row
          @row-click="rowClick"
        >
          <el-table-column prop="sequence" label="仓库盘点序号" width="150">
          </el-table-column>
          <el-table-column prop="receiptsNumber" label="单号" width="150">
          </el-table-column>
          <el-table-column prop="warehouseNo" label="仓库编号">
          </el-table-column>
          <el-table-column prop="kindsNumber" label="款号" width="145">
          </el-table-column>
          <el-table-column prop="sellingPrice" label="售价" width="70">
          </el-table-column>
          <el-table-column prop="differNumber" label="盘差数量">
          </el-table-column>
          <el-table-column prop="differMoney" label="盘差金额">
          </el-table-column>
          <el-table-column prop="differTime" label="盘差日期" width="110">
          </el-table-column>
          <!-- <el-table-column prop="curency" label="币种" width="50px">
          </el-table-column> -->
          <el-table-column prop="operator" label="操作员"> </el-table-column>
          <!-- <el-table-column prop="enteringTime" label="录入日期" width="90px">
          </el-table-column> -->
          <!-- <el-table-column prop="status" label="修改状态"> </el-table-column> -->
        </el-table>
      </div>
      <!-- 下面是底部按钮区域 -->
      <div class="build-btn">
        <div style="margin: 40px 20px 0 0">
          <!-- <el-button @click="closeNew_build">取消</el-button> -->
          <el-button @click="handleCloseBtnClick">关闭</el-button>
          <el-button type="primary" @click="keepGoing_02">继续录入</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 修改继续录入的接口放在这里
// continue_to_enterApi
import {
  kindsNumberOutContinue,
  kindsNumberOut,
  getNumber,
  continue_to_enterApi
} from '../../../../network/customerOutTotal'
import { getWarehouse } from '../../../../network/warehouse'
import { getKindsNumberList } from '../../../../network/artNo'
import { getScanning, getBarCode } from '../../../../network/manufacturer'
import enterUp from '../../../../components/mixins/enterUp'
import today from '../../../../components/mixins/today'
export default {
  // 引入mixins的时候，这个会直接把里面的methods中方法合并
  mixins: [enterUp, today],
  created() {
    this.differTime = this.getNowTime() // 这个是实时的获取盘差日期
    // this.inpList = this.getInput() //input enter移动
    // 获取仓库编号
    getWarehouse().then((res) => {
      // console.log(res.data.data)
      res.data.data.forEach((e) => {
        this.warehouseList.push({
          label: e.name,
          value: e.no,
          Main: e.isMainWarehouse
        })
      })
      for (let a of res.data.data) {
        if (a.isMainWarehouse == 1) {
          this.warehouseNo = a.no //主仓库
        }
      }
    })
  },

  data() {
    return {
      isShowNewBuildDialog: false, // 控制新建资料弹出层显示的按钮
      mapOBjKey: '', // 拼接货号的key
      howMany: '',
      inpList: [],
      warehouseList: [],
      Dis: false,
      isDis: false,
      deta: [],
      id: '',
      // isKindsNumber:false,
      // obj2:[],
      header: '款号',
      AAa: [],
      showPopup: 'none',
      differTime: '',
      receiptsNumber: '', // 这个是单号输入框输入的值
      warehouseNo: '', // 这个是仓库编号 下拉框选中的值
      one: 1,
      differMoney: '',
      sequence: '', // 这个是盘差序号的值
      sellingPrice: '',
      cols: ['7', '9', '1', '3', '5', '7', 'F'],
      isBarcode: false, // 条码扫描swith开关的状态
      // radio:'2',
      searchValue: '', // 扫描、输入条码框输入的值 （输入的款号）
      codeData: [], // 中间表格的数据
      barcodeData: [], // 底部大表格的数据
      XHList: [],
      XHList1: [],
      sizeList: [],
      barcodeData1: [],
      // 保存型上尺对象，到时候，要用到拼接
      manufacturerBarCode: {}
    }
  },
  methods: {
    sibling(e) {
      let s = []
      let pp = e.parentNode.parentNode.children
      // console.log(pp)
      // console.log(pp)
      for (let j = 0; j < pp.length; j++) {
        let p = pp[j].children
        for (let i = 0, pl = p.length; i < pl; i++) {
          if (p[i] !== e) s.push(p[i])
        }
      }
      return s
    },
    // 表格中的input输入框失去焦点的时候，触发的函数 传一个对象过来，在这里就直接参数解构了
    tableInputHandleClick(e, { index, key, result }) {
      const aa =
        e.target.parentNode.parentNode.parentNode.classList.remove('activeCell')
      // console.log(aa) // undefined
      let r = /^(0|[1-9][0-9]*|-[1-9][0-9]*)$/

      if (result != 0) {
        result = result.replace(/\b(0+)/gi, '')
      }
      // 这个正则就是为了要校验，输入的一定要是整数
      if (!r.test(result) && result) {
        this.$alert('数量请输入整数', '', {
          confirmButtonText: '确定'
        })
        // 输入的不是整数，那么就拿到这个输入的数字，让他变成0，然后直接return
        this.codeData[index][key] = 0
        return
      }
      // console.log(this.codeData) // 在输入框回车的时候，就已经为这codeData赋值了，是一个数组，每一个数组包含每一个尺码对象，一个对象里面含有尺码的所有信息
      // console.log(index) // 是table的行index
      // console.log(key) // key是尺码表头的名字
      // 否则直接让拿这个数字，等于这个数字
      this.codeData[index][key] = result
    },
    // 表格中的单元格被点击的时候，触发的函数（我注释的，表格暂时没有异常）
    // cellClick(row, column, cell, event) {
    //   cell.classList.add('activeCell')
    //   let s = this.sibling(cell)
    //   // console.log(s)
    //   s.forEach(e => {
    //     e.classList.remove('activeCell')
    //   })
    // },
    inpEnter(e) {
      e.target.parentNode.parentNode.parentNode.classList.remove('activeCell')
    },
    // 点击关闭图标按钮的时候，触发的函数
    closeNew_build() {
      this.one = 1
      this.receiptsNumber = ''
      // this.warehouseNo = ''
      this.searchValue = ''
      this.barcodeData1 = []
      this.barcodeData = []
      this.isBarcode = false
      this.Dis = false
      this.isDis = false
      this.howMany = ''
      this.$emit('closeNew_build')
    },
    // 点击继续录入的时候，触发的函数，（修改过后用这个）
    async keepGoing_02() {
      // console.log(this.codeData, 'keepGoing_02')
      //用户没有输入数据，直接return
      if (
        !this.searchValue ||
        !this.receiptsNumber ||
        this.codeData.length === 0
      ) {
        return
      }

      let mapObj = {}
      // 变量不能为Object的键，那么就直接用Map构造器
      let myMap = new Map()
      this.codeData.map((item) => {
        for (const key in item) {
          if (key !== 'colorName' && key !== 'colorNo' && item[key] !== '') {
            // 拿到款号，尺码，可以开始拼接，拼接之前，先判断怎么拼接
            // 有型色尺
            if (this.manufacturerBarCode.styleColorSize) {
              // 款号与尺码之间有 -
              if (this.manufacturerBarCode.styleColor) {
                // 尺码与色号之间有 -
                if (this.manufacturerBarCode.colorSize) {
                  mapObj[`${this.header}-${key}-${item.colorNo}`] = Number(
                    item[key]
                  )
                } else {
                  // 色号与尺码之间没有 -
                  mapObj[`${this.header}-${key}${item.colorNo}`] = Number(
                    item[key]
                  )
                }
              } else {
                // 款号与尺码之间没有 -
                if (this.manufacturerBarCode.colorSize) {
                  // 色号与尺码之间有 -
                  mapObj[`${this.header}${key}-${item.colorNo}`] = Number(
                    item[key]
                  )
                } else {
                  // 色号与尺码之间没有 -
                  mapObj[`${this.header}${key}${item.colorNo}`] = Number(
                    item[key]
                  )
                }
              }
            } else {
              // 没有型色尺
              if (this.manufacturerBarCode.styleColor) {
                // 款号与颜色之间有 -
                if (this.manufacturerBarCode.colorSize) {
                  // 色号与尺码之间有 -
                  mapObj[`${this.header}-${item.colorNo}-${key}`] = Number(
                    item[key]
                  )
                } else {
                  // 色号与尺码之间没有 -
                  mapObj[`${this.header}-${item.colorNo}${key}`] = Number(
                    item[key]
                  )
                }
              } else {
                // // 款号与颜色之间没有 -
                if (this.manufacturerBarCode.colorSize) {
                  // 色号与尺码之间有 -
                  mapObj[`${this.header}${item.colorNo}-${key}`] = Number(
                    item[key]
                  )
                } else {
                  // 色号与尺码之间没有 -
                  mapObj[`${this.header}${item.colorNo}${key}`] = Number(
                    item[key]
                  )
                }
              }
            }
          }
        }
      })
      // console.log(
      //   mapObj,
      //   'mapObj[`${this.header}${cNo}-${key}`] = Number(item[key])'
      // )
      // 遍历的map数据的时候，拼接成一个普通的object
      // let makeMapObj = {}
      // // map集合想要变成对象，还要遍历才行
      // for (const key of myMap) {
      //   makeMapObj[key[0]] = key[1]
      // }
      // console.log(makeMapObj, 'makeMapObj')
      // 拿到map对象
      // 遍历this.codeData，如果不等于空，那么就拿出来组成一个map的集合给后端
      // 拼接要发给后端的参数对象
      // 变量不能为Object的键，那么就直接用Map构造器
      // let myMap = new Map()
      // this.codeData.map((item) => {
      //   for (const key in item) {
      //     if (key !== 'colorName' && key !== 'colorNo' && item[key] !== '') {
      //       // console.log(key) // 不符合的key根本进不了
      //       const mapKey = this.searchValue + '-' + item.colorNo + key // item.colorNo是通过item直接取外面的
      //       // console.log(mapKey) // 键
      //       // 将输入的字符串变成数字
      //       const mapValue = Number(item[key]) // 取进来的key的值

      //       // 为map对象实例添加key和value
      //       myMap.set(mapKey, mapValue)
      //       // console.log(bb, 'value')
      //       // console.log(myMap, 'myMap')
      //     }
      //   }
      // })
      // // 遍历的map数据的时候，拼接成一个普通的object
      // let makeMapObj = {}
      // // map集合想要变成对象，还要遍历才行
      // for (const key of myMap) {
      //   makeMapObj[key[0]] = key[1]
      // }
      // console.log(makeMapObj, 'makeMapObj')
      // 拿到map对象
      // 遍历this.codeData，如果不等于空，那么就拿出来组成一个map的集合给后端
      // 拼接要发给后端的参数对象
      const continueEnterParamsObj = {
        kindsNumberMap: mapObj,
        receiptsNumber: this.receiptsNumber, // 单号
        sequence: this.sequence, // 盘差序号
        time: this.differTime, // 盘差日期
        warehouseNo: this.warehouseNo // 仓库编号
      }
      // 这个是发起参数的api,参数要用json转换，否则后端报时间格式错误
      const { data: res } = await continue_to_enterApi(
        JSON.stringify(continueEnterParamsObj)
      )
      console.log(res)
      // 拿到数据发个后端，后端返回来的数据
      if (!res) return // 返回undefined直接return
      if (res.code !== 200) return
      // 下面是请求成功的逻辑
      this.sequence = res.data[0].sequence // 拿到盘差序号展示
      // 拿到数据之后，直接放在底部表格展示
      this.barcodeData = res.data
      // 定义一个自定义事件，把拿到的这个表格数据，直接给父组件展示
      this.$emit('changeParentComponentTableData', res.data)
      // 然后要清空input里面的数据（codedata）里面的数据
      this.codeData = []
      // 清空款号
      this.searchValue = ''
    },
    // 点击关闭按钮的时候，触发的函数
    handleCloseBtnClick() {
      // 清空中间表格数据
      this.codeData = []
      // 清空尺码表头
      this.sizeList = []
      // 清空底部表单数据
      this.barcodeData = []
      // 清除盘差序号
      this.sequence = ''
      // 清空款号
      this.searchValue = ''
      // 清空单号
      this.receiptsNumber = ''
      // 关闭弹出层
      this.$emit('closeNew_build')
    },
    //(当条码输入框按下回车之后，触发这个函数,点击的是,在里面拼接表格，不能删这个)
    scanning() {
      // 款号填写了，这个方法才有意义，填写了，如果填写了执行if语句
      if (this.searchValue) {
        // 款号填写了，并且是条码扫描是关闭的状态下，执行这个
        if (!this.isBarcode) {
          // 输入框填写之后并且条码扫描是关闭的状态 (if这一切都是为了动态拼接表格)
          console.log('条码扫描是关闭状态')
          if (
            // 盘查日期不能为空，单号不能为空，仓库编号不能为空，receiptsNumber 单号
            this.differTime == '' ||
            this.receiptsNumber == '' ||
            this.warehouseNo == '' ||
            this.differTime == null
          ) {
            this.$message({
              type: 'error',
              message: '盘差日期，单号或仓库编号不能为空'
            })
            return
          }
          // 下面这个是接口
          // 手输款号 （根据货号获取所有货号数组）, { kindsNumberStr: this.searchValue }就是一个普通的params参数对象，只是接口的时候，给了默认值，this.searchValue就是输入的款号，根据款号，获取所有的款号
          getKindsNumberList({ kindsNumberStr: this.searchValue }).then(
            (res) => {
              // console.log(res, 'getKindsNumberList')
              this.XHList = res.data.data.data
              // console.log(this.XHList) // 这个是所有的数据（获取数据回来，如果是有数据，直接做if，没有数据，直接提示用户没有这个款号的数据）
              if (res.data.data.data.length) {
                this.header = res.data.data.data[0].styleNumber // 如果有数据返回，那么就拿款号来当表单项
                this.$emit('inpNumChange') //按款号查出数据 输入框增多 inpNumChange传给父组件函数 再次获取 this.inpList = this.getInput() enter键跳下一个输入框 （注释没有反应）
                // 品牌公司查条码规律详情 （这个也是接口）为了获取条形码，（非常重要，后面拼接规则的属性，全部在这里）
                getBarCode({
                  company: res.data.data.data[0].brandedCompany
                }).then((res) => {
                  // console.log('开始查询getBarCode')
                  console.log(res, 'getBarCode')
                  // 拿到这个对象，拼接规则要用到这个对象里面的属性
                  this.manufacturerBarCode = res.data.data[0] // data[0]:[{id: 178, company: '郭氏', styleNumber: 5, colorNumber: 2, styleColor: 1, …}]
                })
                // console.log(this.manufacturerBarCode)
                // 输入款号显示中间表和尺码信息   ZZZ-AAS (下面这个数组的方法，目的是主要是对尺码进行排序而已，先数字 --> 字母) （我注释的）
                // res.data.data.data.sort((a, b) => {
                //   // console.log(a)
                //   // console.log(b)
                //   // console.log(b.relevanceSize)
                //   return a.relevanceSize.localeCompare(b.relevanceSize)
                // })
                // 输入款号显示中间表和尺码信息   ZZZ-AAS(排序，先数字 --> 字母))
                res.data.data.data.sort((a, b) => {
                  return a.relevanceSize.localeCompare(b.relevanceSize)
                })
                // tmp就是所有数据数组
                let tmp = res.data.data.data // 把根据款号获取到的所有数据赋值给tmp
                this.tmpBarcodeData = tmp
                // console.log(tmp)

                // 中间表  尺码的表头 (拼接尺码表头) （这个双重遍历就是为了收集表头的尺码放在this.sizeList中，然后在表格遍历这个，并且生成表格列）
                this.sizeList = [tmp[0].size] // 这个是显示整个表格尺码的数组
                console.log('this.sizeList', this.sizeList) // this.sizeList = ['5']
                let isExistSize = 0
                // 遍历这个tmp（所有的数据）
                for (const i of tmp) {
                  for (const j of this.sizeList) {
                    // 开始前面已经有一个this.sizeList = ['5']了，所以就这一个不收集(定义这个主要是为了数组去重，收集到的，直接break，退出本次循环)，也可以用Set()去重
                    if (j == i.size) {
                      isExistSize = 0
                      break
                    }
                    isExistSize = 1
                  }
                  if (isExistSize) {
                    this.sizeList.push(i.size)
                    console.log(this.sizeList)
                  }
                }

                // 中间表 (下面这个双重遍历和上面的原理一样)
                let tmpCodeData = [
                  { colorNo: tmp[0].colorNo, colorName: tmp[0].colorName }
                ]

                let isExistColor = 0
                for (const i of tmp) {
                  for (const j of tmpCodeData) {
                    if (j.colorName == i.colorName) {
                      isExistColor = 0
                      break
                    }
                    isExistColor = 1
                  }
                  if (isExistColor) {
                    tmpCodeData.push({
                      colorNo: i.colorNo,
                      colorName: i.colorName
                    })
                  }
                }

                tmpCodeData.forEach((e) => {
                  this.sizeList.forEach((f) => {
                    // 这个赋值，主要是给tmpCodeData数组添加对象的项
                    e[f] = ''
                  })
                })
                this.codeData = tmpCodeData // 在这里的时候，codeData就是中间表的数据
                let codeTable = document.getElementById('codeTable') // 获取到中间的表格容器table
                let inputs = codeTable.getElementsByTagName('input') // 获取到表格页面上所有的input输入框
                // console.log(inputs)
                // 定义一个定时器 （注释没有反应）
                let int = setInterval(() => {
                  // 定义一个定时器（节流）
                  clearInterval(int)
                  // 刚开始的时候，让第一个马上获取焦点
                  inputs[0].focus()
                  // console.log(inputs.length - 1, 'inputs.length - 1')
                  // 下面只是给表格中的最后一个输入框绑定onkeyup事件
                  inputs[inputs.length - 1].onkeyup = (e) => {
                    if (window.event.keyCode == 13) {
                      // keyCode==13代表enter回车键
                      // this.continueInput() // 调用‘继续录入’按钮的事件 (以前前端写的)
                      this.continueInput() // 调用‘继续录入’按钮的事件
                      // console.log(this.codeData, 'codeData') // this.codeData 是拿到表格每一行的数据组成的数组
                      this.codeData = [] // 上面发完请求之后，要清空拿到的数组（清空在表格中拿到的数据）
                      // 然后给最后一个input的onkey事件绑定一个空事件
                      inputs[inputs.length - 1].onkeyup = () => {}
                    }
                  }
                }, 100)
              } else {
                // 没有数据返回来，那么就是没有这个款号
                this.$message('此货号/款号无数据')
                // this.$refs.barcodeInput.focus()
              }
            }
          )
        } else {
          // 款号填写，如果条码是开启的情况下，执行else
        }
      }
      // console.log(document.getElementsByTagName('input'))
    },

    // 点击继续录入触发的函数
    continueInput() {
      // 仓库编号为空，直接return
      if (!this.warehouseNo) {
        this.$message({
          type: 'warning',
          message: '仓库不能为空'
        })
        return
      }
      let isNew = false
      let kindsNumberNumMap = {}

      if (this.isBarcode) {
        // 条形码开始走这个逻辑（if不会走）
      } else {
        // 如果用户关闭条码扫描的话，走下面的逻辑
        // 输入
        let knList = []
        // console.log(this.codeData) // 就是表格里面的数据数组 （是通过input拿到的）表格的每一行数据，组成的数组
        this.codeData.forEach((e) => {
          // c就是在用户输入框的时候，拿到的色号，用来拼接给后端的货号
          let c = e.colorNo
          console.log(this.sizeList, 'this.sizeList') // 包含所有的尺码大小（尺码表头数据）
          this.sizeList.forEach((f) => {
            // 没有走if的逻辑,直接走else
            if (this.manufacturerBarCode.styleColorSize) {
              // 型尺色
              if (this.manufacturerBarCode.styleColor) {
                // 款号与尺码之间有 -
                if (this.manufacturerBarCode.colorSize) {
                  // 色号与尺码之间有 -
                  knList.push({
                    kindsNumber: `${this.header}-${f}-${c}`,
                    sum: e[f]
                  })
                } else {
                  // 色号与尺码之间没有 -
                  knList.push({
                    kindsNumber: `${this.header}-${f}${c}`,
                    sum: e[f] // e是代表codeData的每一项，f代表的是listSize的每一项，// c就是在用户输入框的时候，拿到的色号，用来拼接给后端的货号
                  })
                }
              } else {
                // 款号与尺码之间没有 -
                if (this.manufacturerBarCode.colorSize) {
                  // 色号与尺码之间有 -
                  knList.push({
                    kindsNumber: `${this.header}${f}-${c}`,
                    sum: e[f]
                  })
                } else {
                  // 色号与尺码之间没有 -
                  knList.push({
                    kindsNumber: `${this.header}${f}${c}`,
                    sum: e[f]
                  })
                }
              }
              // ------------------------------------------------只走下面else逻辑----------------------
            } else {
              // 型色尺
              // e是代表codeData的每一项，f代表的是listSize的每一项，// c就是在用户输入框的时候，拿到的色号，用来拼接给后端的货号
              if (this.manufacturerBarCode.styleColor) {
                // 款号与颜色之间有 -
                if (this.manufacturerBarCode.colorSize) {
                  // 色号与尺码之间有 -
                  knList.push({
                    kindsNumber: `${this.header}-${c}-${f}`,
                    sum: e[f]
                  })
                } else {
                  // 色号与尺码之间没有 -
                  knList.push({
                    kindsNumber: `${this.header}-${c}${f}`,
                    sum: e[f]
                  })
                }
              } else {
                // 下面逻辑不走
                // 款号与颜色之间没有 -
                if (this.manufacturerBarCode.colorSize) {
                  // 色号与尺码之间有 -
                  knList.push({
                    kindsNumber: `${this.header}${c}-${f}`,
                    sum: e[f] //
                  })
                } else {
                  // 色号与尺码之间没有 -
                  knList.push({
                    kindsNumber: `${this.header}${c}${f}`,
                    sum: e[f]
                  })
                }
              }
            }
          })
        })
        console.log(knList, 'knList已经push32个了') // 在这里的时候，knList已经push32个了
        this.XHList1 = knList
        console.log(this.XHList1)
        var kindList = {}
        knList.forEach((e) => {
          if (e.sum != '') {
            // sum=d[f] 就是拿到的input填写的数据
            kindList[e.kindsNumber] = e.sum
          }
        })
        // knList就是要发给后端的map集合参数
        console.log(kindList) // {QWERT-015: '20', QWERT-025: '30'}
      }
      //判断库存够不够
      // let kindsNumberNumberMap = kindList // // knList就是要发给后端的map集合参数
      // let obj3 = {
      //   companyNo: this.warehouseNo,
      //   kindsNumberNumberMap
      // }
      // getNumber(JSON.stringify(obj3)).then(res => {
      //   console.log(res.data, 'res.data')
      //   if (res.data.code == 202) {
      //     this.$message.error({
      //       message: '查无此对象'
      //     })
      //     return
      //   }
      //   /*
      //  this.XHList1 大数组中有32个这种对象
      //   {
      //      kindsNumber: "QWERT-01B"
      //      sum: "1"
      //   }

      //   */
      //   console.log(this.XHList1, 'this.XHList1')
      // })
    },
    rowClick(e) {
      this.deta = e
      this.id = e.id
    }
  },

  // 下面的监视，只是要输入的时候变成大写
  watch: {
    receiptsNumber(a, b) {
      if (a) {
        this.receiptsNumber = a.toUpperCase().trim()
      }
    },
    searchValue(a, b) {
      if (a) {
        this.searchValue = a.toUpperCase().trim()
      }
    }
  }
}
</script>

<style scoped>
.middle {
  padding: 10px 15px;
}
.middle p {
  padding-bottom: 10px;
}
._top {
  display: flex;
  width: 100%;
  height: 40px;
  padding: 10px 15px;
  justify-content: space-between;
  background: #f8f8f8;
  font-weight: 700;
}

/* 新建资料 */
.mask {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.3;
  z-index: 9;
}
.new_build {
  position: fixed;
  /* position: relative; */
  top: 5%;
  left: 50%;
  transform: translateX(-50%);
  width: 1100px;
  height: 90%;
  z-index: 99;
  background-color: white;
  overflow: auto;
}
.new_build .build-top {
  height: 40px;
  background-color: #f8f8f8;
  display: flex;
  justify-content: space-between;
  padding: 10px 15px;
}
.build-top p {
  font-weight: 700;
}

.new_build input {
  height: 30px;
  border: 1px solid #dcdfe6;
  border-radius: 5px;
  margin-left: 10px;
}
.new_build input:focus {
  outline: none;
  border: 1px solid #409eff;
}

.build-info {
  padding: 0 15px;
  padding-bottom: 10px;
  /* border-bottom: buildlid #f2f2f2 2px; */
}
.build-info-1 p {
  display: inline-block;
  width: 80px;
  text-align: right;
  margin-right: 15px;
}

.barcode {
  display: flex;
}

.build-info .barcode p {
  display: inline;
  margin-right: 15px;
}
.build-info .barcode div {
  margin-top: 15px;
}

.barcode-info-1 p,
.barcode-info-2 p {
  display: inline-block;
  width: 96px;
  text-align: right;
  margin-right: 9px;
}

.colorBox,
.infoBox {
  display: inline;
}

.enterBarcode {
  display: flex;
  height: 60px;
  background-color: #f2f2f2;
  margin: 15px 0;
}

.build-btn {
  text-align: right;
}
.po {
  left: 0;
  right: 0;
  position: absolute;
  opacity: 0;
  z-index: 0;
}
.popup {
  width: 400px;
  height: 200px;
  border: 1px solid #dbdbdb;
  box-shadow: 0 2px 2px 2px #dbdbdb;
  z-index: 999;
  position: absolute;
  left: 30%;
  top: 20%;
  /* margin:-100px 0 0 -200px; */
  background: white;
  /* display: block; */
}
.popup_t {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 40px;
  background: rgb(244, 244, 244);
  padding: 8px 15px;
}
.popup_t p {
  font-weight: 700;
}
.popup_c {
  padding: 8px 15px;
}
.popup_button {
  margin: 5px 0 0 0;
  width: 94%;
  height: 30px;
  padding: 0 10px;
  border: 1px solid #dbdbdb;
  border-radius: 3px;
}
.popup_button:focus {
  outline: none;
  border: 1px solid #017fff;
}
.popup_b {
  margin: 10px 0 0 0;
  padding-left: 230px;
}
.build-inp {
  width: 160px;
}
</style>

<style>
.new_build .build-info-4 .el-table .cell {
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-all;
  line-height: 41px;
  padding-right: 10px;
  height: 40px;
}
.new_build .build-info-4 .el-input__inner {
  border: 0px;
}
.new_build .build-info-4 .el-input__inner:focus {
  border: 1px solid #017aff;
}

/* .new_build .build-info-1 .el-input, .new_build .build-info-3 .el-input{
    width: 425px;
  } */
.new_build .build-info-1 .el-input,
.new_build .build-info-2 .el-input {
  margin-top: 10px;
  width: 160px;
}
.new_build .el-input__inner {
  height: 30px !important;
}
.new_build .el-input__icon {
  line-height: 30px !important;
}
.build-info .barcode .el-switch {
  margin: 0 !important;
}

.new_build .enterBarcode .el-input {
  width: 535px;
  margin: 14px 17px;
}
.new_build .barcode .el-radio {
  margin: 5px 5px 0 20px;
}
</style>
